﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>图片上传</title>
    <script src="/Apm/js/CMSView.js" type="text/javascript"></script>
</head>
<body>
    <button id="image" class="layui-btn">测试上传图片</button>
    <img id="image1" />
    <img id="image2" />
     
    <div>
        <input id="imagetest" type="file" onchange="getImgURL(this)"/>
        <button id="upload"  class="layui-btn">上传</button>
    </div>
</body>
</html>
<script type="text/javascript">
    var imageurl = "";
    $("#upload").click(function () {
        
        alert(imageurl);
        dealImage(imageurl, { width: 200 }, function (base64) {
            $("#image1").attr('src', base64);
        })
    })

    //主动加载jquery模块
    layui.use([ 'layer', 'upload'], function () {
        var layer = layui.layer,
            upload = layui.upload;

        
        var httpurl = "http://localhost:3505/";
       
        //上传图片
        upload.render({
            elem: '#image',
            url: httpurl + 'Upload/Image',
            accept: 'images',
            auto: false, //选择文件后不自动上传
            choose: function (obj) {
                //将每次选择的文件追加到文件队列
                var files = obj.pushFile();

                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function (index, file, result) {
                    console.log(index); //得到文件索引
                    console.log(file); //得到文件对象
                    console.log(result); //得到文件base64编码，比如图片

                    //这里还可以做一些 append 文件列表 DOM 的操作

                    //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                    //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                });
            },
            done: function (res) {
                
            },
            error: function () {

            }
        })

        
    });

    function getImgURL(node) {
        var imgURL = "";
        try {
            var file = null;
            if (node.files && node.files[0]) {
                file = node.files[0];
            } else if (node.files && node.files.item(0)) {
                file = node.files.item(0);
            }
            //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径  
            try {
                //Firefox7.0   
                imgURL = file.getAsDataURL();
                //alert("//Firefox7.0"+imgRUL);                           
            } catch (e) {
                //Firefox8.0以上                                
                imgRUL = window.URL.createObjectURL(file);
                //alert("//Firefox8.0以上"+imgRUL);  
            }
        } catch (e) {      //这里不知道怎么处理了，如果是遨游的话会报这个异常                   
            //支持html5的浏览器,比如高版本的firefox、chrome、ie10  
            if (node.files && node.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    imgURL = e.target.result;
                };
                reader.readAsDataURL(node.files[0]);
            }
        }
        //imgurl = imgURL;  
        alert(imgRUL);
        dealImage(imgRUL, { width: 200 }, function (base64) {
            $("#image1").attr('src', base64);
            //上传base64字符串
            var httpurl = "http://localhost:3505/";
            json = new Object();
            json.base64 = base64;
            $.ajax({
                url: httpurl + 'Upload/Image',
                type:'post',
                contentType: 'application/json',
                data: JSON.stringify(json),
                success: function (data) {
                    alert(data);
                },
                error: function () {
                    
                }
            })

        })
        
    }

     
    /**
 * 图片压缩，默认同比例压缩
 * @param {Object} path 
 *   pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
 * @param {Object} obj
 *   obj 对象 有 width， height， quality(0-1)
 * @param {Object} callback
 *   回调函数有一个参数，base64的字符串数据
 */
    function dealImage(path, obj, callback) {
        var img = new Image();
        img.src = path;
        img.onload = function () {
            var that = this;
            // 默认按比例压缩
            var w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            var quality = 0.7;  // 默认图片质量为0.7
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);
            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                quality = obj.quality;
            }
            // quality值越小，所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            callback(base64);
        }
    }
</script>